<template>
  <a-breadcrumb style="background: white;padding: 16px 32px;font-size: 16px">
    <a-breadcrumb-item href="">
      <home-outlined/>
    </a-breadcrumb-item>
    <a-breadcrumb-item>学校管理</a-breadcrumb-item>
    <a-breadcrumb-item>学校信息</a-breadcrumb-item>
  </a-breadcrumb>
  <div style="padding: 16px">
    <a-card style="height: min-content;margin-bottom: 16px">
      <span style="font-size: 16px;font-weight: bolder">基本信息</span>
      <a-divider style="margin: 8px"/>
      <div style="display: flex;align-items: center">
        <img style="width: 48px;height: 48px;margin-right: 40px"
             src="https://gaoxiao.jszs.com/Public/college/logo/zyt_r86n72cq.jpg">

        <div style="display: flex;flex-direction: column;width: 160px">
          <span style="color: #8b8b8b;margin-bottom: 4px;">校名</span>
          <span style="color: black;font-size: 16px">昆明理工大学</span>
        </div>

        <div style="display: flex;flex-direction: column;width: 160px">
          <span style="color: #8b8b8b;margin-bottom: 4px;">地区</span>
          <span style="color: black;font-size: 16px">云南昆明</span>
        </div>

        <div style="display: flex;flex-direction: column;width: 160px">
          <span style="color: #8b8b8b;margin-bottom: 4px;">学生数</span>
          <span style="color: black;font-size: 16px">1200</span>
        </div>
      </div>
    </a-card>

    <a-card style="height: min-content;margin-bottom: 16px">
      <span style="font-size: 16px;font-weight: bolder">基本信息</span>
      <a-divider style="margin: 8px"/>
      <div style="display: flex;height: 320px">
        <div style="flex: 1">
          <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center">
            <a-empty>
              <template #description>
                <div style="display: flex;flex-direction: column">
                  <span>
                  没有抽取学生
                </span>
                  <a-button>前去抽取</a-button>
                </div>
              </template>
            </a-empty>
          </div>
        </div>
        <canvas style="height: 100%;flex: 1;width: 0px" id="fvZJhXxrvdywXDXIRPYwtBazDgAjWpjZ" class="charts"></canvas>
      </div>

    </a-card>

    <a-card style="height: min-content;margin-bottom: 16px">
      <span style="font-size: 16px;font-weight: bolder">基本信息</span>
      <a-divider style="margin: 8px"/>

      <a-table
          :pagination="false"
          :columns="columns2"
          :data-source="data2"
          bordered
          size="middle"
          :scroll="{ x: '2000px'}">
        <template #bodyCell="{ column ,record}">
          <template style="" v-if="true">
            <div style="display:flex;flex-direction: column;justify-content: start;height: 100%"
                 v-if="record[column.key]">
              <!--              <div style="height: 180px">{{record[column.key]}}</div>-->

              <div style="display: flex;flex-direction: column" v-if="record[column.key].type==1">
                <span style="margin-bottom: 8px">人员组成：</span>
                <div v-if="record[column.key].cq">
                  <div :style="{'background':item==='1'?'#65c5ff':'#ffa1c7'}"
                       style="height: 40px;margin-bottom: 8px;border-radius: 8px;display: flex;align-items: center;justify-content: space-between;padding: 0px 8px"
                       v-for="(item,index) in getPersonList(record[column.key].members)">

                    <span>罗建国：</span>
                    <span style="font-size: 24px;font-weight: bolder">{{ item }}</span>
                  </div>
                </div>
              </div>

              <div style="display: flex;flex-direction: column" v-if="record[column.key].type==2">
                <span style="margin-bottom: 8px">团队项目：</span>
                <div v-if="record[column.key].cq">
                  <div
                      style="height: 40px;margin-bottom: 8px;border-radius: 8px;background: #ffeca8;display: flex;align-items: center;justify-content: space-between;padding: 0px 8px"
                      v-if="record[column.key].no">
                    <span>团队签号：</span>
                    <span style="font-size: 24px;font-weight: bolder">{{ record[column.key].no }}</span>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </template>
      </a-table>
    </a-card>
    <!--    <div style="display: flex;margin-bottom: 16px;">-->
    <!--      <a-card style="flex: 1;margin-right: 8px">-->
    <!--        <span style="font-size: 16px;font-weight: bolder">基本信息</span>-->
    <!--        <a-divider style="margin: 8px"/>-->


    <!--      </a-card>-->
    <!--      <a-card style="flex: 1;margin-left: 8px;display: flex;flex-direction: column;">-->
    <!--        <span style="font-size: 16px;font-weight: bolder">基本信息</span>-->
    <!--        <a-divider style="margin: 8px"/>-->
    <!--        <canvas style="flex: 1;width: 100%;height: 320px" id="fvZJhXxrvdywXDXIRPYwtBazDgAjWpjZ" class="charts"></canvas>-->


    <!--      </a-card>-->
    <!--    </div>-->
  </div>
</template>

<script>
// 需要在您的项目内执行 npm i @qiun/vue-ucharts
import qiunVueUcharts from '@qiun/ucharts'

export default {
  name: "schoolInfo",
  components: {
    qiunVueUcharts
  },
  data() {
    const width = 80;
    const columns2 = [
      {
        title: '专业教育理论知识',
        dataIndex: 'ZYJYLLZS',
        key: 'ZYJYLLZS',
        width: width
      },
      {
        title: '专业教学能力',
        children: [
          {
            title: '队列队形',
            dataIndex: 'DLDX',
            key: 'DLDX',
            width: width,
          },
          {
            title: '教学设计',
            dataIndex: 'JXSJ',
            key: 'JXSJ',
            width: width
          },
          {
            title: '片段教学',
            dataIndex: 'PDJX',
            key: 'PDJX',
            width: width
          },
        ],
      },
      {
        title: '专业运动技能',
        dataIndex: 'ZYYDJN',
        key: 'ZYYDJN',
        width: width,
        children: [
          {
            title: '田径(抽人)',
            dataIndex: 'TJ',
            key: 'TJ',
            width: width,
            children: [
              {
                title: '60米跑(3男1女)',
                dataIndex: 'LSMP',
                key: 'LSMP',
                width: width,
              },
              {
                title: '跳高(1男)',
                dataIndex: 'TG',
                key: 'TG',
                width: width
              },
              {
                title: '跳远(1女)',
                dataIndex: 'TY',
                key: 'TY',
                width: width
              },
            ],
          },
          {
            title: '体操',
            dataIndex: 'TC',
            key: 'TC',
            width: width,
            children: [
              {
                title: '健身操',
                dataIndex: 'JSC',
                key: 'JSC',
                width: width,
              },
              {
                title: '跳绳',
                dataIndex: 'TS',
                key: 'TS',
                width: width
              },
              {
                title: '单杠和技巧(抽人)',
                dataIndex: 'DGHJQ',
                key: 'DGHJQ',
                width: width,
                children: [
                  {
                    title: '单杠(3人)',
                    dataIndex: 'DG',
                    key: 'DG',
                    width: width,
                  },
                  {
                    title: '技巧(3人)',
                    dataIndex: 'JQ',
                    key: 'JQ',
                    width: width
                  }
                ],

              },
            ],
          },
          {
            title: '武术',
            dataIndex: 'WS',
            key: 'WS',
            width: width
          },
          {
            title: '足篮排(抽人)',
            dataIndex: 'ZLP',
            key: 'ZLP',
            width: width,
            children: [
              {
                title: '足球(2人)',
                dataIndex: 'ZQ',
                key: 'ZQ',
                width: width,
              },
              {
                title: '篮球(2人)',
                dataIndex: 'LQ',
                key: 'LQ',
                width: width
              },
              {
                title: '排球(2人)',
                dataIndex: 'PQ',
                key: 'PQ',
                width: width
              },
            ],

          },
        ],
      },
    ];
    const data2 = [
      {
        'ZYJYLLZS': {
          type: 1,
          name: '专业教育理论知识',
          cq: false,
        },
        'DLDX': {
          type: 2,
          name: '队列队形',
          cq: true,
          no: 12,
        },
        'JXSJ': {
          type: 1,
          name: '教学设计',
          cq: false,
        },
        'PDJX': {
          type: 1,
          name: '片段教学'
        },
        'LSMP': {
          type: 1,
          name: '60米跑',
          members: '3+1',
          cq: true,
        },
        'TG': {
          type: 1,
          name: '跳高',
          members: '1+0',
          cq: true,
        },
        'TY': {
          type: 1,
          name: '跳远',
          members: '0+1',
          cq: true,
        },
        'JSC': {
          type: 2,
          name: '健身操',
          members: '6',
          cq: true,
        },
        'TS': {
          type: 2,
          name: '跳绳',
          members: '6',
          cq: true,
        },
        'DG': {
          type: 1,
          name: '单杠',
          members: '3',
          cq: true,
        },
        'JQ': {
          type: 1,
          name: '技巧',
          members: '3',
          cq: true,
        },
        'WS': {
          type: 2,
          name: '武术',
          cq: true,
        },
        'ZQ': {
          type: 1,
          name: '足球',
          members: '2',
          cq: true,
        },
        'LQ': {
          type: 1,
          name: '篮球',
          members: '2',
          cq: true,
        },
        'PQ': {
          type: 1,
          name: '排球',
          members: '2',
          cq: true,
        },
      }
    ];
    return {
      chartData: {},
      columns2,
      data2
    }
  },
  mounted() {
    this.getServerData();
  },
  methods: {
    getPersonList(members) {
      if (members == null) return;
      let result = '';
      if (!members.includes('+')) {
        for (let i = 0; i < Number.parseInt(members); i++) {
          result += '0'
        }
      } else {
        let strs = members.split('+');
        for (let i = 0; i < Number.parseInt(strs[0]); i++) {
          result += '1'
        }
        for (let i = 0; i < Number.parseInt(strs[1]); i++) {
          result += '2'
        }
      }
      return result;
    },
    getServerData() {
      const canvas = document.getElementById("fvZJhXxrvdywXDXIRPYwtBazDgAjWpjZ");
      let data = {
        categories: ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
        series: [
          {
            name: "成交量1",
            data: [90, 110, 165, 195, 187, 172]
          },
        ]
      };
      const ctx = canvas.getContext("2d");

      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
      new qiunVueUcharts({
        type: "radar",
        context: ctx,
        width: canvas.width,
        height: canvas.height,
        categories: data.categories,
        series: data.series,
        animation: true,
        background: "#FFFFFF",
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [5, 5, 5, 5],
        dataLabel: false,
        enableScroll: false,
        legend: {
          show: true,
          position: "right",
          lineHeight: 25
        },
        extra: {
          radar: {
            gridType: "circle",
            gridColor: "#CCCCCC",
            gridCount: 3,
            opacity: 0.2,
            max: 200,
            labelShow: true
          }
        }
      });


    },
  }
}
</script>

<style>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 400px;
}

td {
  text-align: left;
  vertical-align: top;
}
</style>
